Hay diferentes formas de añadir un menú en el header, claro está que no vamos a hablar de todas sino de una en concreto que Gabuleta lleva tiempo esperando.

Con la siguiente explicación conseguiremos un menú en el header y aunque a simple vista pueda parecer complicado es justamente todo lo contrario, lo que hace es simplificar el menú de forma que podemos cambiar los colores con la herramienta "Fuentes y colores"



Lo primero que haremos será eliminar la barra de navegación que nos provee Blogger más conocida como Navbar.
Buscamos ]]></b:skin> y justo antes añadimos lo siguiente.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Ahora que no tenemos barra de navegación, justo después del código anterior añadimos los estilos del menú:

.menu {
width:660px;
height:27px;
background: $menubgColor;
border: 1px solid $menumainBorderColor;
}
.menu ul{
padding:5px 0 0 10px;
margin:0px;
float:right;
list-style:none;
border-right: 1px solid $menuBorderColor;
}
.menu li{
padding:0px;
margin:0px;
float:left;
list-style:none;
line-height:32px;
}
.menu a{
float:left;
display:block;
padding:0 15px 0 15px;
color: $menuTextColor;
font: $menuTextFont;
border-left: 1px solid $menuBorderColor;
}
.menu a:hover{
color: $menuHoverTextColor;
background: $menuHoverBgColor;
}

Con width escogemos el ancho normalmente el mismo ancho que tenemos en outer-wrapper y con height le damos altura.

Si deseamos añadir una imagen de fondo en lugar de color simplemente eliminamos la línea background: $menubgColor;
y en su lugar añadimos:
background: url('url imagen');
(No intentes guardar los cambios ahora)

Como podéis ver en los estilos del menú los colores no fueron definidos con css, sino que añadimos una línea de código para que las variables hagan su función desde la herramienta fuentes y colores. Para que esas variables funcionen y poder guardar los cambios primero debemos añadirlas.

Al inicio de la plantilla veremos algo así:


Justo después de:

/* Variable definitions
====================
Añadimos las nuevas variables para el menú:

<Variable name="menubgColor" description="Color de Fondo"
type="color" default="#C94093" value="#940f04">
<Variable name="menumainBorderColor" description="Color del borde"
type="color" default="#C94093" value="#000000">
<Variable name="menuBorderColor" description="Líneas de separación"
type="color" default="#9D1961" value="#000000">
<Variable name="menuTextColor" description="Color texto"
type="color" default="#ffffff" value="#cccccc">
<Variable name="menuHoverBgColor" description="Color de fondo Hover"
type="color" default="#ffffff" value="#15222b">
<Variable name="menuHoverTextColor" description="Color texto Hover"
type="color" default="#9D1961" value="#ffffff">
<Variable name="menuTextFont" description="Tipo de fuente"
type="font"default="normal normal 77% Verdana, sans-serif" value="normal bold 95% Georgia, Times, serif">

Ahora si que podemos guardar los cambios, las variables de este ejemplo las he probado sin problemas pero si diera algún error del tipo "Declaración de variable no válida en máscara de página" comprobaremos de qué variable se trata y miraremos si al copiar y pegar no cometimos algún error.

Seguimos con nuestro menú, ya sólo queda añadir los enlaces, buscamos nuevamente en la plantilla:
<div id="header-wrapper">

y justo antes añadimos:

<div class="menu">
<ul>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
</ul>
</div>

Una vez guardados los cambios y añadidos nuestros enlaces en plantilla de diseño veremos el menú más o menos así:


Ya podemos comprobar si los enlaces están correctos.




Para enlazar diferentes páginas como puede ser el correo, acceso al panel de Blogger o sitios externos puedes ver como hacerlo en Configurar menús.

Para añadir traductor y buscador a este menú mira la siguiente entrada.
Gracias por la paciencia Gabuleta
Angel

Dios le bendiga, el menú me ha funcionado pero tiene un ligero error.No puedo editar los colores.Me sale eso en fuentes y colores, no en diseño. Y no puedo guardar los cambios.

Quisiera me ayudes...muchas gracias.

Responder
Gem@

yz Saludos Angel Luís inténtelo añadiendo el código de los estilos antes de ]]></b:skin> en lugar de antes de <head> :)

Responder
Jaime Trujillo Escobedo

Gem@!! que buena idea! viene genial para aquellos que no les guste adentrarse en la plantilla para personalizar el menú. ;)

Lo probé en mi blog de pruebas y me gustó las opciones de fuente que tiene para elegir :D

Responder
Jan

Hola Gema! Ufff... Hacía mucho que no me pasaba por aquí :$ En realidad hacía mucho que no seguía con el blog porque me quitaba mucho tiempo. Ahora he vuelto con fuerzas renovadas y algo más de tiempo libre ;)
Sólo quería darte las gracias porque mucho de lo que sé sobre diseño, a sido gracias a tu blog.
Un abrazo y feliz inicio de semana!

Responder
Angel

Intente lo que me dijo pero sigo teniendo el mismo problema.Salían unas líneas de código encima del blog al hacer eso.Ahora lo puse donde lo había puesto primero, después del código de la navbar y sale diferente.

¿Porqué será esto?

Saludos.

Responder
Henry

Genial como siempre algo sencillo y practico.
Una buena maestra siempre enseña de la forma mas simple y efectiva.
Buen inicio de semana para ti.

Responder
José GDF

¿Se puede hacer que ese menú, en vez de desaparecer cuando bajas por la página (scroll), permancezca arriba fijo?

¿Añadiendo algo al CSS, como position: fixed o algo así? Supongo que lo añadiríamos en .menu. Así estaría siempre disponible el menú aunque bajes... Otra cosa es que quede bien... Supongo que será más cuestión de gustos... :P

Responder
Anónimo

Hola gema!
que genial el menú.
Lo he intentado y me ha quedado genial.
Con todo, me gusta más para el estilo pálido de blog de letras el menú que tengo dentro de la cabecera.

¿Recuerdas que hace algúnos días te comentaba que desconocía la razón por la que mi blog se puso mas ancho?
Estuve revisando y me di cuenta que es por el menú... cuando lo quito la página esta normal, cuando lo coloco se amplía...

Por favor Gema, si sabes la razón por la que ocurre esto, me podrías ayudar?
Puedes ver el código fuente de mi blog si no es molestia y verificar si el menú tiene algún error?

gracias Gema por tu amabilidad.

http://desvariosdeunartista.blogspot.com/

Responder
Anónimo

Hola Gema,
Ya estoy tratando de modificar el menu de mi blog, por lo menos logré quitarle el ancho desproporcionado.
sigo intentando ahora colocarlo en donde estaba...

gracias gema.

Responder
Gabuleta*

Miles de gracias Gema! Siempre tan atenta. Gracias a vos por la paciencia con todo lo que pregunto jaja. Ahora mismo me pongo y luego te muestro el resultado.
Gracias!!!!

Responder
Gem@

yz Me alegra que te guste Jaime :)

yz ¡Hola Jan! me alegra verte de nuevo con ilusión por seguir escribiendo y tiempo libre :)
Espero verte ahora con más frecuencia amigo :)
Miles y miles de gracias :D

yz Angel Luis si salían unas líneas eso es porque alguna etiqueta no estaba bien cerrada, al añadirlo antes de ]]></b:skin> no crea problema alguno. Yo lo intentaría de nuevo...
Si antes de añadir el menú no tenemos la barra de Blogger entoces no es necesario añadir lo siguiente:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Si la tenemos, entonces justo antes de ]]></b:skin> añadimos

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

.menu {
width:660px;
height:27px;
background: $menubgColor;
border: 1px solid $menumainBorderColor;
}
.menu ul{
padding:5px 0 0 10px;
margin:0px;
float:right;
list-style:none;
border-right: 1px solid $menuBorderColor;
}
.menu li{
padding:0px;
margin:0px;
float:left;
list-style:none;
line-height:32px;
}
.menu a{
float:right;
display:block;
padding:0 15px 0 15px;
color: $menuTextColor;
font: $menuTextFont;
border-left: 1px solid $menuBorderColor;
}
.menu a:hover{
color: $menuHoverTextColor;
background: $menuHoverBgColor;
}

El resto tal y como está en su blog lo veo bien, si no resultara esta vez me comenta de nuevo y vemos como solucionarlo pero yo creo que siguiendo estos pasos va a resultar
bien.

yz Hola Henry :) gracias por comentar, feliz semana para ti también.

yz José GDF pienso que si puede hacerse, pero prefiero no arriesgarme a decir que si sin probarlo, recuerdo una entrada donde añadiamos el footer fijo y en su interior cualquier contenido. Con el menú se puede intentar lo mismo pero añadiendo un header fijo y en su interior el menú :D

yz Fero para dejar el menú donde lo tenías prueba de la siguiente forma,sustituye la siguiente línea
<div style='position:relative;text-align:right;width:98%;'>
Por esta:
<div style='position:relative;left:470px;bottom:38px;'>

yz Gabuleta espero te sea más útil que el anterior :)

Responder
Anónimo

Gema: muchas gracias, volvió a su posición original, pero... mira el ancho de la pagina: se ha desproporcionado nuevamente :o

ya no se si rendirme... :-s

Responder
Gabuleta*

Ay Gema es hiper práctico simple y bonito y no me sale! jaja. O sea, aparece el menú, pero los links aparecen de forma vertical, si ves el blog vas a entender a que me refiero. El blog es blupruebas.blogspot.com.
No quiero seguir molestando pero me encantan o este menú o el de efecto onmouseover, y con los dos tengo problemas jaja.
Si podés decirme como solucionar el de este, o como hacer que el onmouseover quede pegado al header y mas al centro, elijo el que me digas como solucionar y lo dejo jaja.
Mil gracias.
Saludos!
Gabuleta.

Responder
Angel

Me salió como la primera vez que lo puse.Al ponerlo despues de skin, siguen saliendo los códigos arriba del blog.Aunque así no se ve mal, me gustaría editarlo.No se podría editar sin acceder a las fuentes y colores?

Gracias por su ayuda y atención

Responder
Angel

Lo intente de nuevo, el problema era que lo estaba poniendo donde no era.antes de (otro)skin, no en el correcto.Ahora se ve bien!!

Muchas gracias!! :)

Responder
Angel

Ay Gema no se visualiza bien en internet explorer

:(

Responder
Ɣɑɲęşɑ Ƹ̵̡Ӝ̵̨̄Ʒ

Graaaaaaaaaaacias Gema, eres un Solete!!!

Lo puesto en mi blog http://tertuliademaestrasdeinfantil.blogspot.com/ y la verdad que me ha quedado bastante bien, gracias de nuevo

Besos

Responder
Gem@

yz Fero no veo eso desproporcionado, he mirado con Firefox y Explorer :O
¿Puedes mandarme una captura señalando eso que dices?

yz Gabuleta ha sido un error que he cometido no comprobarlo con los dos navegadores, prueba sustituyendo en los estilos donde dice:
.menu a{
float:right;

por

.menu a{
float:left;

yz Angel Luis el problema es el mismo que presenta Gabuleta, y la solución también la misma, intente sustituir donde dice
.menu a{
float:right;

por

.menu a{
float:left;

También sería conveniente darle un poco de más anchura al menú, en lugar de width: 660px probaría con width: 990px es cuestión de ir probando y mirando en vista previa :)
Creo que con eso queda bien en Explorer y Firefox, lamento que ocasionara este problema por no comprobarlo cuando hacía los ejemplos :(

yz Vanesa me alegra que resultara bien :D

Responder
Anónimo

Gema;
ya lo veo bien amiga; muchas gracias :) eres muy amable.

una pregunta mas con respecto a ese menú amiga:
como hago para añadir unas imágenes en lugar del texto?

gracias por todo.

Responder
Anónimo

Gema: ya coloque las imagenes como enlaces, muchas gracias!!!
Lo hice revisando unos post anteriores tuyos!

muchas gracias por todo.
Ahora, esteré buscando unos iconos mas acordes.

:)

abrazo.

Responder
Angel

¡Gloria a Dios!..Muchas gracias Gema quedó muy bien.Gracias por compartir sus conocimientos de manera desinteresada.

Dios la bendiga mucho!

:D

Responder
Angel

Por cierto Gema, quisiera saber como eliminar un pequeño punto (.) que aparece a la izquierda arriba del blog.Sería lo único que faltaría para que quede perfecto.

Responder
Angel

Y o otra vez,jaja...Lo que quisiera saber es si puedo eliminar el espacio en blanco que aparece arriba del blog.

Gracias.

Responder
Angel

Quedó perfecto, Vanessa comentó en mi Blog y me recomendó que hacer para eliminar el espacio en blanco y un punto que aparecía arriba.

Gracias a las 2

:) :)

Responder
Alicia

Hola Gem@ ! muy bueno... aunque no lo he hecho jejee... bueno tengo una inquietud hace tiempo... me gusta mucho el buscador que tienes en la sidebar, me pregunto como hago para tener uno asi en mi blog?

espero me puedas contestar!

Saludos!

Responder
Ɣɑɲęşɑ Ƹ̵̡Ӝ̵̨̄Ʒ

Gema una cosilla viendo que SakurAlicia** te ha comentado sobre el Buscador, te comento que en mi blog http://desordenandoelblog.blogspot.com/ tengo un buscador pero no me funciona, me podrias ayudar??

Gracias no obstante

Responder
Anónimo

jjkk

Responder
Alicia

Hola!

Bueno creo que el comentario de Vanesa me hiso pensar en mi buscador... a mi blog solo le agregue el buscador que ofrece blogger... pero no me gusta... mi blog es de fondo negro y al darle sale un fondo blanco, por eso no me gusta... quisiera poner un buscador como el que tienes aqui Gem@, espero me puedas ayudar a conseguir un buen buscador para mi blog...


Saludos!

Responder
Gem@

yz Estupendo Fero :)

yz Angel Luis González me alegra todo esté solucionado, siento la demora en contestar pero estuve unos días sin poder conectarme :(

yz SakurAlicia mi buscador lleva una imagen pero no tengo inconveniente en ofrecer el código aunque aquí resulta engorroso explicarlo, mejor en una entrada ¿ok?

yz La misma respuesta va también para ti *_*Ɣɑɲęşɑ*_* :)
Gracias por ayudar a Angel Luis González, eres muy amable :)

Responder
Gabuleta*

Hola Gema! Recién hoy pude ponerme con el blog :) perfecto, así quedó bien, no se como no me di cuenta. Miles de gracias como siempre!!!
Besos!!

Responder
Gem@

yz Genial Gabuleta, me alegra leer eso :D
Ya me avisarás cuando lo tengas terminado ;)

Responder
Anónimo

WOW ESTOY REALMENTE AGRADECIDO, MUCHAS GRACIAS GEMA, ME ENCANTAN TUS APORTES, ME ENCANTA TU BLOG, ESTA FENOMENAL... GRACIAS MUCHAS VECES

Responder
Gem@

yz Gracias anónimo :)

Responder
JAVI

Bueno Gema, pues te digo.
hice todo lo que dices y todo me salio perfecto ya lo tengo metido en mi blog de pruebas a la espera de que tu metas la entrada de añadir el traductor al menu.
Tengo que decirte algo y perdoname por ello, pero todo me salio bien menos cuando quise añadir una imagen al menu, en vez de color, porque tu dices que para eso hay que poner: background: url('url imagen');en el lugar de la
linea background: $barramenubgColor; y esto ulltimo ni siquiera existe en el codigo que tu das, entonces haciendo pruebas, elimine esto otro: background: $menubgColor; y lo cambie por este que tu dices: background: url('url imagen'); y asi ya me salio bien. Perdona mi atrevimiento por decirte esto vale?
Nada mas, estoy a la espera de lo de poner el traductor en el menu, pero tu tranquila que yo espero lo que sea.
Me encanta como me quedo lo del menu, gracias a ti claro!!
Chao guapa!!

Responder
Gem@

yz Ya he rectificado eso que comentas. Gracias ;)
Y la entrada ya puedes verla, cualquier cosa ya me comentas algo pero será el sábado, mi puente es cortito.

Responder
Unknown

hola gem@ puse el menú con bastante éxito. Pero ¿cuál es el link para "suscrivbirse? Yo puse http://paraninosconcabeza.blogspot.com/atom.xml, y no es eso... aparece una página con todos los posts. Debería aparecer otra cosa ¿no?

Responder
Gem@

yz Esa dirección que has puesto es para Google Reader válida para suscribirse y que los que se suscriban puedan leer las actualizaciones con ese lector.

Responder
Unknown

ya, pero si clicas vas a una página con contenidos... por eso preguntaba. y otra pregunta es qué pongo en contacto????
tenkiuuu

Responder
Gem@

yz No sé donde te lleva a ti lk pero a mi me lleva a la suscripción de tu blog en Google Reade.
En contacto depende la forma de contactar que quieras puedes ver un ejemplo de como configurar un menú en la siguiente url:
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html

Responder
Ami~

¡Hola Gem@!
Muchas gracias por este sencillo menú (:

Pero, lamentablemente comento para hacer una inquietud.
Resulta que no logro hacer que el menú se centre y se mantenga ahí, justo al centro del head.
He probado cambiando las posiciones del Float, añadiendo padding, pero nada que resulte efectivo al 100%. Quiero dejarlo fijo, pero, por ejemplo, se fija según la resolución de pantalla. Yo poseo una de ancho de 1440 y el menú queda bien cargado a la izquierda, mi hermana que posee una menor, le queda centrado un poco más, pero igualmente hacía la izquierda.
Como te decía, me gustaría que quedase siempre al medio. También me he dado cuenta de que cuando pongo restaurar la ventana de mi explorador [firefox] el menú se mueve más a la derecha, se centra un poco. ¿Por qué pasa esto, no puede queda fijo en un solo lugar?

Este es el blog del problema:
http://cockayne-soup.blogspot.com/

Muchas gracias de antemano (;

Responder
Gem@

yz Hola Ami, no queda fijo porque el menú tiene establecida una medida de ancho (width:660px) mira donde dice:
"Con width escogemos el ancho normalmente el mismo ancho que tenemos en outer-wrapper y con height le damos altura"

Para que el menú cubra todo el ancho independientemente de la resolución de pantalla prueba a sustituirla por width:100%; pero ya sabes que los enlaces quedarán posiblemente escondidos a la derecha, puedes ubicarlos a la izquierda y de esa forma se mostrarán siempre.

Responder
Ami~

¡Hola Gem@!
Te cuento que no me sirvió cambiar el width.

Aunque encontré una solución... iba a postearla pero como tiene códigos, no me la toma.
Te la envío al correo, ¡a ver si a alguien más le sirve después!

¡Muchas Gracias, Gem@! :D

Responder
Gem@

yz Recibido y contestado Ami :)

Responder
Isaac Chavero

Hola, estoy personalizando mi blog y este menu me parece muy vistoso, pero ¿podría hacerse con pestañas deslizantes? De esta forma podría tener más contenido

Responder
Gem@

yz Este mismo no Isaac los hay como dices pero no con la opción de personalizar desde fuentes y colores :(

Responder
Isaac Chavero

Gema, en mi plantilla "sand dollar" el menu queda pegado al borde superior. Pero ahora estoy cambiando a una "minima" y aparece una línea por encima. ¿cómo se puede eliminar o rellenar?. Creo que este tipo de menu para quedar bien, tiene que estar justo en el borde superior sin margenes

Responder
Gem@

:: Isaac Chavero el menú queda sin márgenes en la línea superior, pueden influir las medidas de la plantilla tendría que ver esa plantilla para decir como arreglar ese problema.
La línea puede ser que en los estilos hay añadido un borde:
border: 1px solid $menumainBorderColor;
Si lo ponemos a border: 0px eliminamos la línea.

Responder
Isaac Chavero

he puesto a opx y sigo teniendo la línea por encima. mi plantilla de pruebas tiene esta dirección: http://ichavero.blogspot.com/
Aprovecho para preguntarte otra cosa; estoy combinando este menu, con tu "menu sencillo efecto onmouseover. Mi idea es tener dos lineas de menu (una encima de la otra)con aspecto diferente porque creo que dos líneas con el mismo estilo no quedan bien. Mi problema es que no se como conseguir que el "menu onmouseover" tenga todo el ancho de la plantilla.

Gracias por tu ayuda

Responder
Gem@

:: En ese blog veo que los dos menús tienen botones que pasan a la línea siguiente, es decir da la sensación que sobran los tres últimos botones del menú de arriba, si dejamos menos espacio entre los textos de menú se consigue que todos los botones estén en la misma línea.Por ejemplo en el menú superior:
.menu a{
float:left;
display:block;
padding:0 15px 0 15px;
color: #ffffff;
font: normal normal 86% Trebuchet, Trebuchet MS, Arial, sans-serif;
border-left: 1px solid #e6e6e6;
}

el padding lo sustituimos por:
padding:0 9px;

El segundo menú (el inferior) está añadido encima del header y al estar este dividido en dos no se muestra con el mismo ancho del anterior menú que está añadido antes del header.
No sé si me explico, para mostrarlo justo debajo del primer menú debe añadirse el contenido del gadget HTML5 a continuación del contenido del primer menú.

Responder
Isaac Chavero

Hola Gema, gracias por tu tiempo

los botones pasan a la línea siguiente en algunos ordenadores, supongo que por el ancho de pantalla o la resolución.

He cambiado el padding y en mi ordenador queda un espacio muy grande a la izquierda del menu.

En el segundo menu, puedo aumentar la anchura para separarlo un poco y no quede tan pegado, pero no cubre la longitud. ya lo he situado detrás del otro menu,

Y sigo teniendo encima del menu un espacio que no me gusta

Responder
forseti99

Hola Gema :P , este menú me ha servido de las mil maravillas pero...

Estoy remodelando mi blog "forseti99.blogspot.com" para el nuevo año y quisiera que ahora el menú estuviera debajo del header, ya he estado intentando un buen rato y no lo logro :$ ¿Como podría lograrlo?

En mi blog de pruebas ya tengo algunos cambios hechos "cosvarpruebas.blogspot.com", como voy a poner una imagen creo que se vería mejor el menú bajo el header, pero no tengo idea de como, sería maravilloso si pudieras ayudarme. Gracias :D

Responder
Gem@

:: Hola forseti99, para que el menú se muestre después del logo puedes probar a añadir la parte de los enlaces:
<div class="menu">
<ul>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
</ul>
</div>

en el interior de un gadget de htm justo en ese sitio, es decir después del logo. También puedes darle la misma anchura que tienes en ese espacio, en la parte de los estilos que dice:
.menu {
width:660px;
...
...
...
lo cambias a width: 860px; ;)

Responder
forseti99

Excelente Gema, eres maravillosa :0 :D :0 :D no se me había ocurrido hacerlo así.

Mil gracias por tu ayuda, felices fiestas, bye.

Responder
Gem@

:: Isaac Chavero como bien dices más arriba el navegador tiene mucho que ver en la forma de ver las cosas, por ejemplo con Firefox veo que el menú superior no tiene color de fondo y para ver el texto hay que pasar el ratón sobre él porque tampoco se ve color de texto.
Con Explorer se ve perfecto con el inconveniente que el menú inferior no alcanza la anchura del menú superior.
En un anterior comentario decía que el menú inferior está añadido en el header izquierdo (esa plantilla tiene el header dividido en dos)como el header izquierdo tiene de anchura width: 62%; no cubre todo el ancho de la página por lo tanto el menú tampoco la cubrirá si no lo sacas de ahí y lo añades en un gadget arriba del todo o añades el código para los enlaces en la msima plantilla a continuación del menú superior..

:: forseti99 ha quedado de lujo :)
Felices Fiestas para ti también ;)

Responder
Pedro Velasquez

hola Gema con un problema que no encuentro la etiqueta div id="header-wrapper" supongo que es por mi plantilla, hay algunas parecidas no se si seran estas
div id='main-wrapper'
div id='header-inner' el blog que quiero modificar es
http://pedro-velasquez.blogspot.com/


Que tengas felices fiestas y un año nuenvo

pd. Quiera que alguna sema de estas incluyeras este blog como el de la seman..

Graciass Gem@

Responder
Gem@

:: Hola Eu en tu blog viene así:
div id="outer-wrapper"
aquí puedes ponerlo
div id="header"
div id="header-inner
Tendré en cuenta lo de añadirlo como blog de la semana.

Responder
Pedro Velasquez

hola gema encontre una etiqueta similar a la que nesesitaba y me funciono, tal y como queria.

Gracias a ti
solo un cosa lei lo de configuracion de menus y encontre lo del corrreo lo trate de poner pero me salio error, yo lo puese como que fura un menu mas con los codigos para correo pero no fuciono te lo mostrara aqui pero no me daja----

Disculpa tantas molestias

Responder
Gem@

:: Eu la forma de enlazar el correo es la siguiente:
<li><a href="mailto:aquí tu dirección de correo"target="_blank" title="aquí descripción></a>

Responder
Gem@

:: Perdón falta la etiqueta li cerrada al final
<li><a href="mailto:aquí tu dirección de correo"target="_blank" title="aquí descripción></a></li>

Responder
Pedro Velasquez

gracias por tu ayuda y tu dispociocion ahora lo implemeto graciass

Responder
Pedro Velasquez

no se que estoy haciendo mal coloque el codigo que me diste despues de otro enlace, despues de la etiqueta li y me sale este error

Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

Responder
Gem@

:: Cambia las comillas dobles " por simples '

Responder
Pedro Velasquez

hola gema esto si que me esta dando lata...ji ji..
me da pena contigo preguntandote tanto, ojala eso sea que pienso bastante..

Bueno tome una captura, http://2.bp.blogspot.com/_sVVLvwLcQmo/SzlPuxunHhI/AAAAAAAAAEk/Csq9WQ7S5DI/s1600-h/problema+con+el+correo.bmp

Cual sera mi error?
Gracias gem@

Responder
Gem@

:: Prueba a quitar el target="_blank" :)

Responder
Gem@

:: Auqnue ahora que me fijo bien el error es mío porque olvidé añadir el texto que hace de enlace:
Cambia mi correo por el tuyo, y lo siento no me di cuenta que te lo explicaba omitiendo ese dato :S
<li><a href='mailto:forevergema@gmail.com' title='Para contactar vía mail'>Contacto</a>
</li>

Responder
Pedro Velasquez

ok.....
me quedo lindo
gracias ati.
cuando quieras date una buelta por mi blog
http://pedro-velasquez.blogspot.com/

Graciass

Responder
Gem@

:: Es cierto que quedo bien lindo, me gusta como queda integrado en el mismo color del blog :)

Responder
Manuel

Hala Gem@ tengo un menú superior distinto a éste y me gustaría que ocupase el ancho de cualquier pantalla. En outer-wrapper he cambiado el valor de width a 100% pero se ensancha la página entera. No me importaría usar éste otro pero creo que el problema sería el mismo. Creo que habrá que cambiar algun otro valor de la plantilla ¿podrías ayudarme? Gracias.

Responder
Gem@

:: Yo veo que ocupa todo el ancho del blog M@nuel lo miso he llegado tarde y ya solucionaste el problema.

Responder
Martin

excelente truco, ya lo agregue a mi blog, muchas gracias... Videos Gratis

Responder
Martin

Hola, me podrias decir como agregar un "submenu"...

Responder
Gem@

:: Lo siento Martín Mundaraín este menú no está creado para submenús :S

Responder
Isaac Chavero

HOla ,en mi menu de control de Blogger In Draft ¡ha desaparecido la opción "fuentes y colores" pero no el menu "normal"

Responder
Gem@

:: Las variables las veo bien añadidas pero la forma de añadir los enlaces en el gadget de html no ¿hablamos del blog larevistadecirugiaestetica?

Responder
Isaac Chavero

no, me pasa con todos mis blogs (3 con plantillas clásicas) desde ayer cuando entro desde "blogger in Draft" a "diseño" me desaparece la opción "fuentes y colores" (desaparece la pestaña) Para poder utilizar la opción fuentes y colores tengo que cerrar y volver a abrir la cuenta entrando en el escritorio.

Dices que no tengo bien añadidos los enlaces, pero todos funcionan

Responder
Gem@

:: Ese problema debe ser algo interno de Blogger Isaac, cuando eliminamos las variables sigue saliendo esa pestaña pero sin la opción de escoger fuentes y colores, esa pestaña es algo que no se maneja desde la plantilla, será cuestión de esperar.
Sobre los enlaces hay un dicho y es que si algo funciona no lo toques, sin funcionan déjalo así no perjudica en nada :)

Responder
Lui-Ka! x3

Hola! Gema esta muy interesante tu entrada pero si solo deseo cambiar su fondo por una imagen?
Apox. cuanto debería medir y que cambios debería hacer?

Responder
Gem@

:: Saludos Lui-Ka! x3 en la entrada hay una parte que dice:
Si deseamos añadir una imagen de fondo en lugar de color simplemente eliminamos la línea background: $menubgColor;
y en su lugar añadimos:
background: url('url imagen');

La medida no debe ser superior a la de outer-wrapper :)

Responder
Mr. Chapter

No me sale! :(
Gem@ has dicho que esta es solo una de las formas de hacer esto, tienes alguna entrada sobre otra forma de hacerlo?
(siento las molestias)

Responder
Gem@

:: No veo en tu blog que siguieras estos pasos de la entrada guither al menos los estilos del menú no están.
(En la nube de etiquetas puedes ver una etiqueta con el texto de "Menús" ahí verás distintos tipos de menús :)

Responder
Mariano Figueroa

hola
si pongo una imagen como fondo
como edito las variables

:) saludos ;)

Responder
Gem@

:: Las variables son para que se pueda cambiar desde fuentes y colores, ya no está activa esa opción y además no se puede cambiar de imagen desde ahí sino de color.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top